<template>
	<a-spin :loading="loading" style="width: 100%">
		<a-card
			class="general-card"
			:header-style="{ paddingBottom: 0 }"
			:body-style="{
				paddingTop: '20px',
			}"
			title="内容数据"
		>
			<template #extra>
				<a-link>查看更多</a-link>
			</template>
			<Chart height="289px" :option="chartOption" />
		</a-card>
	</a-spin>
</template>

<script setup>
	import { ref } from 'vue'
	import { graphic } from 'echarts'
	import useLoading from '@/hooks/loading'
	import { queryContentData } from '@/api/dashboard'
	import useChartOption from '@/hooks/chart-option'

	function graphicFactory(side) {
		return {
			type: 'text',
			bottom: '8',
			...side,
			style: {
				text: '',
				textAlign: 'center',
				fill: '#4E5969',
				fontSize: 12,
			},
		}
	}
	const { loading, setLoading } = useLoading(true)
	const xAxis = ref([])
	const chartsData = ref([])
	const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])
	const { chartOption } = useChartOption(() => {
		return {
			grid: {
				left: '2.6%',
				right: '0',
				top: '10',
				bottom: '30',
			},
			xAxis: {
				type: 'category',
				offset: 2,
				data: xAxis.value,
				boundaryGap: false,
				axisLabel: {
					color: '#4E5969',
					formatter(value, idx) {
						if (idx === 0) return ''
						if (idx === xAxis.value.length - 1) return ''
						return `${value}`
					},
				},
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					interval: (idx) => {
						if (idx === 0) return false
						if (idx === xAxis.value.length - 1) return false
						return true
					},
					lineStyle: {
						color: '#E5E8EF',
					},
				},
				axisPointer: {
					show: true,
					lineStyle: {
						color: '#23ADFF',
						width: 2,
					},
				},
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: false,
				},
				axisLabel: {
					formatter(value, idx) {
						if (idx === 0) return value
						return `${value}k`
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: '#E5E8EF',
					},
				},
			},
			tooltip: {
				trigger: 'axis',
				formatter(params) {
					const [firstElement] = params
					return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${(Number(firstElement.value) * 10000).toLocaleString()}</span></div>
          </div>`
				},
				className: 'echarts-tooltip-diy',
			},
			graphic: {
				elements: graphicElements.value,
			},
			series: [
				{
					data: chartsData.value,
					type: 'line',
					smooth: true,
					// symbol: 'circle',
					symbolSize: 12,
					emphasis: {
						focus: 'series',
						itemStyle: {
							borderWidth: 2,
						},
					},
					lineStyle: {
						width: 3,
						color: new graphic.LinearGradient(0, 0, 1, 0, [
							{
								offset: 0,
								color: 'rgba(30, 231, 255, 1)',
							},
							{
								offset: 0.5,
								color: 'rgba(36, 154, 255, 1)',
							},
							{
								offset: 1,
								color: 'rgba(111, 66, 251, 1)',
							},
						]),
					},
					showSymbol: false,
					areaStyle: {
						opacity: 0.8,
						color: new graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: 'rgba(17, 126, 255, 0.16)',
							},
							{
								offset: 1,
								color: 'rgba(17, 128, 255, 0)',
							},
						]),
					},
				},
			],
		}
	})
	const fetchData = async () => {
		setLoading(true)
		try {
			const { data: chartData } = await queryContentData()
			chartData.forEach((el, idx) => {
				xAxis.value.push(el.x)
				chartsData.value.push(el.y)
				if (idx === 0) {
					graphicElements.value[0].style.text = el.x
				}
				if (idx === chartData.length - 1) {
					graphicElements.value[1].style.text = el.x
				}
			})
		} catch (err) {
			// you can report use errorHandler or other
		} finally {
			setLoading(false)
		}
	}
	fetchData()
</script>

<style scoped lang="less"></style>
